import React, { useState, useEffect } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, Image, TextInput, Button, Text, Alert } from 'react-native';
import { cancelStyle } from './styles'
import assets from '../assets'
import { themeColors, commonStyle } from 'styles'
import { RadiusButton, Toast } from 'components'
import { getAuthorization } from 'services/authorization'
import pos from 'api/pos';
import { AppUser } from '../../api/pos';

const CancelSignInScreen: NavigationStackScreenComponent = props => {
	const [password, setPassword] = useState<string>('')
	const [managerInfo, setManagerInfo] = useState<AppUser>({})
	useEffect(() => {
		pos.posApp.getManagerInfo({ mac: getAuthorization().mac, projectId: getAuthorization().project.id }).then(res => {
			if (res.result) {
				// Alert.alert('1')
				setManagerInfo(res.data)
			} else {
				// Alert.alert('2')
				Toast.show(res.msg || '获取主管信息失败，请稍后再试')
				return
			}

		}).catch(err => {
			Toast.show(err.msg ? err.msg : '获取主管信息失败，请稍后再试')
			return
		})
	}, [])
	return (
		<View style={{ ...commonStyle.containerColumn, ...cancelStyle.container }}>
			<Image style={cancelStyle.logo} source={assets.images.icon_cancel_lock} />
			<Text style={cancelStyle.account}>{`主管账号：${managerInfo.name}(${managerInfo.account})`}</Text>
			<TextInput
				onChangeText={text => { setPassword(text) }}
				textContentType="password"
				secureTextEntry={true}
				placeholder="请输入主管密码"
				placeholderTextColor={themeColors.placeholder}
				style={cancelStyle.input}
			/>
			<RadiusButton
				onPress={() => {
					if (password === '') {
						Toast.show('请输入主管密码')
						return
					}
					pos.posApp.verifyPassword({ mac: getAuthorization().mac, password, projectId: getAuthorization().project.id }).then(res => {
						if (res.result) {
							// Alert.alert('1')
							props.navigation.replace('CancelNumber')
						} else {
							// Alert.alert('2')
							Toast.show(res.msg || '验证失败，请稍后再试')
							return
						}

					}).catch(err => {
						Toast.show(err.msg ? err.msg : '验证失败，请稍后再试')
						return
					})
					// props.navigation.replace('CancelNumber')
				}}>
				<Text style={cancelStyle.login} >登录</Text>
			</RadiusButton>
		</View>
	)
}

CancelSignInScreen.navigationOptions = props => {
	return { title: '撤销' }
}

export default CancelSignInScreen
